<template>
  <div>
      <!-- 二级路由视图 -->
      <transition enter-active-class="animate_animated animate_bounceInLeft">
          <router-view></router-view>
      </transition>
      <footer>
          <router-link active-class="active" to="/index/home">首页</router-link >
          <router-link active-class="active" to="/index/cate">分类</router-link >
          <router-link active-class="active" to="/index/shop">购物车</router-link>
          <router-link active-class="active" to="/index/mine">我的</router-link>
      </footer>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
footer{
    width: 100vw;
    height: 0.8rem;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    border: 1px solid #ccc;
}
footer a {
    flex: 1;
    font-size: 0.3rem;
    text-align: center;
    line-height: 0.8rem;
}
.active{
color: #ff4400;
}
</style>